/**
 * Copyright 2011 Google Inc.
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.

 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */

/**
 * Fonts
 */
@font-face {
    font-family: 'MolengoRegular';
    src: url('fonts/molengo-regular-webfont.eot');
    src: local('☺'), url('fonts/molengo-regular-webfont.woff') format('woff'), url('fonts/molengo-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('fonts/droidserif-webfont.eot');
    src: local('☺'), url('fonts/droidserif-webfont.woff') format('woff'), url('fonts/droidserif-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('fonts/droidserif-italic-webfont.eot');
    src: local('☺'), url('fonts/droidserif-italic-webfont.woff') format('woff'), url('fonts/droidserif-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('fonts/droidserif-bolditalic-webfont.eot');
    src: local('☺'), url('fonts/droidserif-bolditalic-webfont.woff') format('woff'), url('fonts/droidserif-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('fonts/droidserif-bold-webfont.eot');
    src: local('☺'), url('fonts/droidserif-bold-webfont.woff') format('woff'), url('fonts/droidserif-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSans';
    src: url('fonts/droidsans-webfont.eot');
    src: local('☺'), url('fonts/droidsans-webfont.woff') format('woff'), url('fonts/droidsans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSans';
    src: url('fonts/droidsans-bold-webfont.eot');
    src: local('☺'), url('fonts/droidsans-bold-webfont.woff') format('woff'), url('fonts/droidsans-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


html, body {
    background-color: #eeeeee;
    /*background: url("/Content/themes/custom/image/wood_inner.jpg") no-repeat scroll 100% 100% / cover  rgba(0, 0, 0, 0);*/
    transition: background-color .4s linear;
    -o-transition: background-color .4s linear;
    -moz-transition: background-color .4s linear;
    -webkit-transition: background-color .4s linear;
    min-height: 836px;
    font-family: DroidSans, Arial, Helvetica, sans-serif;
    color: #333333;
    width: 836px;
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    body.normal {
        background: url("/Content/themes/custom/image/wood_inner.jpg") no-repeat scroll 100% 100% / cover rgba(0, 0, 0, 0);
    }

/**
 * Explicitly specify which elements that can be selected
 */
section p, section span, section h2, section h3,
#credits p, #credits h2, #credits ul li,
#front-cover-bookmark p {
    user-select: text;
    -o-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
}

a, a:hover, a:active {
    outline: none;
    color: #333333;
    text-decoration: none;
    transition: color .12s linear;
    -o-transition: color .12s linear;
    -moz-transition: color .12s linear;
    -webkit-transition: color .12s linear;
}

/**
 * Preloader
 */
#preloader {
    background-color: #eeeeee;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100000;
}

    #preloader .contents {
        width: 300px;
        height: 200px;
        position: relative;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
        opacity: 0;
    }

        #preloader .contents .animation {
            width: 91px;
            text-align: center;
            position: relative;
            left: 50%;
            margin-left: -45px;
        }

        #preloader .contents .progress {
            height: 7px;
            width: 302px;
            background-color: #fefefe;
            border-radius: 2px;
            margin-top: 10px;
            box-shadow: 0px 1px 3px #ccc;
            -o-box-shadow: 0px 1px 3px #ccc;
            -moz-box-shadow: 0px 1px 3px #ccc;
            -webkit-box-shadow: 0px 1px 3px #ccc;
        }

            #preloader .contents .progress .fill {
                background-color: rgb(215, 70, 75);
                transition: width .5s ease-out;
                -o-transition: width .5s ease-out;
                -moz-transition: width .5s ease-out;
                -webkit-transition: width .5s ease-out;
                background-image: gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
                background-image: -o-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
                background-image: -moz-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
                background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
                border-radius: 2px;
                height: 7px;
                width: 0px;
            }


/**
 * Applies the background to all sprites.
 */
header, header a.logo, header nav ul a.back, header nav ul li.table-of-things a, header input[type="text"],
footer, footer div.sharing a, footer div.print a span.icon, footer div.lights a, .lights a span.icon,
div.lights.clone, div.lights.clone a, .lights.clone a span.icon, .fullscreen a span.icon,
div.fullscreen.clone, div.fullscreen.clone a, .fullscreen.clone a span.icon, footer div.fullscreen a,
#shadow .shadow-left, #shadow .shadow-right,
#search-dropdown div.background-top, #search-dropdown div.background-bottom, #spine div,
#chapter-nav ul li, #chapter-nav a.over div.small-book, #table-of-contents ul li div.medium-book,
#table-of-contents a.go-back, #pagination-prev div.arrow, #pagination-next div.arrow,
#overlay div.bookmark, #overlay div.bookmark .content a.close, #overlay div.print,
#overlay div.print p, #overlay div.print a.downloadPdf:hover, #overlay div.print a.printBook:hover, #credits div.people ul li h3,
#credits div.share ul li span.icon, #front-cover-bookmark, #sharer div.background-top,
#sharer div.background-bottom, #sharer div.content ul li a, #sharer div.content p.instruction span, #sharer div.content ul li.print #front-cover-arrow, #paperstack .shadow, #overlay div.print a.disabled, #language-selector-title > a {
    background: transparent url('images/sprites.png?v=15') no-repeat top left;
}

/**
 * Book styles
 */
#book {
    width: 1328px;
    height: 520px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -270px 0 0 -1220px;
    z-index: 2;
}

#grey-mask {
    background: url('images/grey-mask.png') repeat-y top left;
    position: absolute;
    display: block;
    z-index: 1100;
    height: 100%;
    width: 60px;
}

#left-page {
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    height: 520px;
}

body.home #left-page {
    width: 0;
}

#right-page {
    position: absolute;
    overflow: hidden;
    left: 664px;
    z-index: 10;
    background-color: #fff;
    height: 520px;
}

body.credits #right-page {
    width: 0;
}

#paperstack {
    position: absolute;
    width: 34px;
    height: 500px;
    top: 10px;
    left: 640px;
}

    #paperstack .paper {
        width: 1px;
        float: left;
        z-index: 2;
    }

        #paperstack .paper.s1 {
            height: 500px;
            margin-top: 0px;
            background-color: #b6d6d6;
        }

        #paperstack .paper.s2 {
            height: 498px;
            margin-top: 1px;
            background-color: #c8c9c9;
        }

        #paperstack .paper.s3 {
            height: 496px;
            margin-top: 2px;
            background-color: #d6d6d6;
        }

        #paperstack .paper.s4 {
            height: 494px;
            margin-top: 3px;
            background-color: #c8c9c9;
        }

        #paperstack .paper.s5 {
            height: 492px;
            margin-top: 4px;
            background-color: #d6d6d6;
        }

        #paperstack .paper.s6 {
            height: 490px;
            margin-top: 5px;
            background-color: #c8c9c9;
        }

        #paperstack .paper.s7 {
            height: 488px;
            margin-top: 6px;
            background-color: #d6d6d6;
        }

    #paperstack .shadow {
        background-position: -1018px -169px;
        width: 30px;
        height: 500px;
        margin-left: 0;
    }

    #paperstack .paper,
    #paperstack .shadow {
        transition: opacity .15s linear;
        -o-transition: opacity .15s linear;
        -moz-transition: opacity .15s linear;
        -webkit-transition: opacity .15s linear;
    }

#front-cover {
    display: none;
    position: absolute;
    left: 664px;
    top: 0;
    height: 520px;
    z-index: 1000;
    background-color: #7893c1;
}

body.home #front-cover {
    display: block;
}

#back-cover {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 520px;
    z-index: 1001;
    background-color: #7893c1;
}

body.credits #back-cover {
    display: block;
}

#page-shadow-overlay {
    display: none;
    position: absolute;
    z-index: 999;
    left: 688px;
    top: 10px;
    width: 640px;
    height: 500px;
    opacity: 0;
    background-color: #000000;
}

#front-cover-bookmark {
    background-position: -790px -152px;
    width: 205px;
    height: 630px;
    display: block;
    position: absolute;
    left: 840px;
    top: -41px;
    z-index: 1100;
}

body.overlay #front-cover-bookmark {
    opacity: 0;
    transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
}

#front-cover-bookmark div.content {
    text-align: center;
    padding: 0 40px;
    line-height: 1.05em;
    width: 117px;
}

    #front-cover-bookmark div.content h3 {
        font-weight: bold;
        font-size: 11px;
        text-transform: uppercase;
        position: relative;
        top: 170px;
    }

    #front-cover-bookmark div.content p {
        font-size: 12px;
        color: #666666;
        position: relative;
        top: 172px;
        margin-bottom: 12px;
        line-height: 1.5em;
    }

#front-cover-bookmark a.open-book {
    position: absolute;
    top: 440px;
    left: 43px;
    color: #fff;
    padding: 4px 6px 3px 6px;
    width: 97px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    background-color: #aa2222;
    background-image: gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
    background-image: -o-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
    background-image: -moz-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(215, 70, 75)));
    box-shadow: 0px 1px 3px #333;
    -o-box-shadow: 0px 1px 3px #333;
    -moz-box-shadow: 0px 1px 3px #333;
    -webkit-box-shadow: 0px 1px 2px #333;
    text-shadow: 0px 1px 1px #666;
    -o-text-shadow: 0px 1px 1px #666;
    -moz-text-shadow: 0px 1px 1px #666;
    -webkit-text-shadow: 0px 1px 1px #666;
}

    #front-cover-bookmark a.open-book:hover {
        background-image: gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(235, 85, 90)));
        background-image: -o-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(235, 85, 90)));
        background-image: -moz-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(235, 85, 90)));
        background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(175, 40, 45)), to(rgb(235, 85, 90)));
    }

    #front-cover-bookmark a.open-book:active {
        background-image: gradient(linear, 0% 100%, 0% 0%, to(rgb(165, 40, 45)), from(rgb(175, 40, 45)));
        background-image: -o-gradient(linear, 0% 100%, 0% 0%, to(rgb(165, 40, 45)), from(rgb(175, 40, 45)));
        background-image: -moz-gradient(linear, 0% 100%, 0% 0%, to(rgb(165, 40, 45)), from(rgb(175, 40, 45)));
        background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, to(rgb(165, 40, 45)), from(rgb(175, 40, 45)));
    }

#front-cover-bookmark #flip-intro {
    position: absolute;
    top: 486px;
    left: 54px;
}

/**
 * Header styles
 */
header {
    background-repeat: repeat-x;
    width: 100%;
    height: 53px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 836px;
    z-index: 2000;
}

    header h1 {
        text-indent: -10000em;
    }

    header a.logo {
        background-position: left -62px;
        width: 159px;
        height: 32px;
        display: block;
        margin-top: 9px;
        margin-left: 13px;
        float: left;
    }

    header nav {
        display: block;
        float: left;
        margin: 14px 0 0 24px;
        height: 40px;
    }

        header nav ul li {
            position: relative;
            padding: 1px 6px;
            height: 21px;
            display: block;
            float: left;
            z-index: 10;
            transition: background-color .14s linear;
            -o-transition: background-color .14s linear;
            -moz-transition: background-color .14s linear;
            -webkit-transition: background-color .14s linear;
        }

body:not(.tot).credits header nav ul li.credits,
body.tot header nav ul li.table-of-things {
    padding: 0 5px;
    height: 23px;
    background-color: #f1f1f1;
    border-radius: 3px;
    border-top: 1px #d3d3d3 solid;
    border-bottom: 1px #f8f8f8 solid;
    border-left: 1px #e9e9e9 solid;
    border-right: 1px #e9e9e9 solid;
}

header nav ul li.about {
    left: -4px;
}

header nav ul li.credits {
    left: -8px;
}

header nav ul li.divider1,
header nav ul li.divider2 {
    position: relative;
    width: 1px;
    height: 20px;
    background-color: #e9e9e9;
    border: 1px solid white;
    margin: 0;
    padding: 0;
    z-index: 1;
}

header nav ul li.divider1 {
    left: -2px;
}

header nav ul li.divider2 {
    left: -6px;
}

header nav a {
    text-decoration: none;
    color: #333333;
    font-size: 11px;
    padding: 4px;
}


header nav ul li.table-of-things a {
    background-position: -174px -64px;
    padding-left: 42px;
}

header nav ul a.back {
    padding-left: 21px;
    background-position: -236px -306px;
}

header nav a:hover {
    color: #b41e21;
}

header input[type="text"] {
    background-position: -406px -55px;
    position: absolute;
    display: block;
    top: 9px;
    right: 5px;
    width: 193px;
    height: 32px;
    border: none;
    outline: none;
    margin: 0;
    padding: 0 4px 0 26px;
    font-size: 11px;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    color: #888888;
    z-index: 2001;
}


/*header input:focus[type="text"] { 
		background-position: -652px -56px;
			color: #333333;
		}*/


/**
 * Language Selector
 */
#language-selector {
    display: inline-block;
}

#language-selector-title {
    display: inline-block;
    font-size: 11px;
    margin-top: 10px;
    width: 100%;
    cursor: pointer;
    /* background: #ddd;
	background: gradient(linear, 0% 100%, 0% 0%, from(rgb(230, 230, 230)), to(rgb(255, 255, 255)));
	background: -o-gradient(linear, 0% 100%, 0% 0%, from(rgb(230, 230, 230)), to(rgb(255, 255, 255)));
	background: -moz-gradient(linear, 0% 100%, 0% 0%, from(rgb(230, 230, 230)), to(rgb(255, 255, 255)));
	background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(230, 230, 230)), to(rgb(255, 255, 255)));
	
	border: 1px #bbb solid;
	border-radius: 3px;
	
	transition: background-color,color .03s,.03s linear;
	-o-transition: background-color,color .03s,.03s linear;
	-moz-transition: background-color,color .03s,.03s linear;
	-webkit-transition: background-color,color .03s,.03s linear; */
}

    #language-selector-title:hover,
    #language-selector-title.open {
        background: gradient(linear, 0% 100%, 0% 0%, from(rgb(230, 230, 230)), to(rgb(255, 255, 255)));
        background: -o-gradient(linear, 0% 100%, 0% 0%, from(rgb(230, 230, 230)), to(rgb(255, 255, 255)));
        background: -moz-gradient(linear, 0% 100%, 0% 0%, from(rgb(230, 230, 230)), to(rgb(255, 255, 255)));
        background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(245, 245, 245)), to(rgb(255, 255, 255)));
        border: 1px #bbb solid;
        border-radius: 3px;
    }

    #language-selector-title.open {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    #language-selector-title > a {
        display: block;
        padding: 6px 20px 6px 6px;
        background-position: 100% -58px;
    }

    #language-selector-title:hover > a,
    #language-selector-title.open > a {
        display: block;
        padding: 5px 18px 5px 5px;
        background-position: 100% -59px;
    }


#language-selector-list {
    font-size: 11px;
    width: 100%;
    background: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px #bbb solid;
    border-top: none;
    padding: 2px 0;
    display: none;
}

    #language-selector-list.open {
        display: block;
    }

    #language-selector-list ul {
        margin: 0;
    }

        #language-selector-list ul li a {
            display: block;
            padding: 5px 0 4px;
            width: 100%;
            text-indent: 5px;
            transition: background-color,color .03s,.03s linear;
            -o-transition: background-color,color .03s,.03s linear;
            -moz-transition: background-color,color .03s,.03s linear;
            -webkit-transition: background-color,color .03s,.03s linear;
        }

            #language-selector-list ul li a:hover {
                background: #82b8f4;
                color: #fff;
            }


/**
 * Search
 */
#search-dropdown {
    width: 222px;
    position: absolute;
    z-index: 2001;
    opacity: 0;
}

    #search-dropdown.open {
        opacity: 1;
    }

    #search-dropdown .fader {
        display: none;
        height: 100%;
    }

    #search-dropdown.open .fader {
        display: block;
    }

    #search-dropdown div.background-top {
        background-position: -1048px -152px;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #search-dropdown div.background-bottom {
        background-position: -1048px -704px;
        position: relative;
        width: 100%;
        height: 50px;
    }

    #search-dropdown div.results {
        width: 204px;
        margin: 10px;
        position: absolute;
        top: 0;
    }

        #search-dropdown div.results .empty {
            display: none;
            font-size: 14px;
            margin: 5px;
        }

    #search-dropdown.no-results div.results .empty {
        display: block;
    }

    #search-dropdown.no-results div.results .things,
    #search-dropdown.no-results div.results .keywords {
        display: none;
    }

    #search-dropdown div.results h4 {
        font-size: 10px;
        font-weight: bold;
        color: #666666;
        text-align: center;
        margin: 6px 0 8px 0;
    }

        #search-dropdown div.results h4 span {
            background-color: #ffffff;
            position: relative;
            z-index: 5;
            padding: 0 6px;
        }

    #search-dropdown div.results hr {
        width: 190px;
        border-color: #ffffff;
        color: #eeeeee;
        margin-top: -6px;
        z-index: 1;
    }

    #search-dropdown div.results li {
        cursor: pointer;
        font-size: 12px;
        margin: 4px;
    }

    #search-dropdown div.results .things li {
        height: 62px;
    }

    #search-dropdown div.results li p strong {
        background-color: #fff5b4;
    }

    #search-dropdown div.results .things li .illustration {
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 7px;
        background-color: #ffffff;
    }

    #search-dropdown div.results .things li:hover .illustration {
        background-color: #f4f4f4;
        border-radius: 4px;
    }

    #search-dropdown div.results .keywords li {
        padding: 4px 5px;
    }

    #search-dropdown div.results .things li .title {
        font-weight: bold;
        margin-top: 15px;
    }

    #search-dropdown div.results .things li:hover .title,
    #search-dropdown div.results .keywords li:hover .snippet {
        color: #b41e21;
    }

    #search-dropdown div.results .things li .pages,
    #search-dropdown div.results .keywords li .pages {
        font-size: 11px;
        color: #666666;
    }

.cs-CZ #search-dropdown div.results .things li .pages,
.cs-CZ #search-dropdown div.results .keywords li .pages,
.pl-PL #search-dropdown div.results .things li .pages,
.pl-PL #search-dropdown div.results .keywords li .pages {
    font-size: 10px;
}

#search-dropdown div.results .things li:hover .pages,
#search-dropdown div.results .keywords li:hover .pages {
    color: #333333;
}


#search-dropdown div.results li .title,
#search-dropdown div.results li .pages,
#search-dropdown div.results .keywords li .snippet,
#search-dropdown div.results .keywords li .pages {
    transition: color .11s linear;
    -o-transition: color .11s linear;
    -moz-transition: color .11s linear;
    -webkit-transition: color .11s linear;
}

#search-dropdown div.results .things li .illustration,
#search-dropdown div.results .things li:hover .illustration {
    transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -webkit-transition: background-color .15s linear;
}

#search-dropdown,
#search-dropdown.open {
    transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
}

/**
 * The chapter navigation below the book
 */
#chapter-nav ul li,
#chapter-nav ul li a.over,
#chapter-nav ul li:hover a.over {
    transition: opacity .21s linear;
    -o-transition: opacity .21s linear;
    -moz-transition: opacity .21s linear;
    -webkit-transition: opacity .21s linear;
}

#chapter-nav {
    display: block;
    position: absolute;
    width: 664px;
    z-index: 1015;
    padding: 20px 0;
    z-index: 1998;
}

    #chapter-nav > p {
        font-size: 10px;
        font-weight: bold;
        color: #999999;
        position: absolute;
        left: -108px;
        margin-top: 5px;
        width: 100px;
        text-align: right;
        text-shadow: 0 1px 1px #ffffff;
        -o-text-shadow: 0 1px 1px #ffffff;
        -moz-text-shadow: 0 1px 1px #ffffff;
        -webkit-text-shadow: 0 1px 1px #ffffff;
    }

    #chapter-nav ul li {
        background-position: -9px -227px;
        display: block;
        width: 35px;
        height: 20px;
        list-style: none;
        float: left;
        margin: 0 3px;
        opacity: 0.5;
        position: relative;
        z-index: 1;
    }

        #chapter-nav ul li:hover {
            z-index: 10;
            opacity: 1;
        }

        #chapter-nav ul li.selected,
        #chapter-nav:hover ul li {
            opacity: 1;
        }

        #chapter-nav ul li.read {
            background-position: -64px -227px;
        }

        #chapter-nav ul li.disabled {
            background-position: -119px -227px;
        }

            #chapter-nav ul li.disabled a,
            #chapter-nav ul li.disabled a span {
                cursor: default;
            }

                #chapter-nav ul li.disabled a span {
                    color: #cccccc;
                }

        #chapter-nav ul li .cnItem span {
            float: right;
        }

        #chapter-nav ul li .cnItem .illustration {
            width: 16px;
            height: 16px;
            float: left;
            margin: 2px 0 0 0;
        }

        #chapter-nav ul li.disabled .illustration {
            display: none;
        }

        #chapter-nav ul li.selected .cnItem {
            border: 2px solid #e2494f;
            margin: -2px 0 -2px 0;
            border-radius: 2px;
            width: 32px;
        }

            #chapter-nav ul li.selected .cnItem .illustration {
                margin-left: -2px;
            }

        #chapter-nav ul li .cnItem {
            display: block;
            font-size: 8px;
            text-decoration: none;
            color: #8a8a8a;
            text-align: right;
            width: 34px;
            height: 20px;
        }

            #chapter-nav ul li .cnItem span {
                position: relative;
                top: 6px;
                right: 5px;
            }

        #chapter-nav ul li .over {
            position: relative;
            margin-left: 3px;
            width: 87px;
            cursor: pointer;
            overflow: visible;
            left: -28px;
            display: none;
        }

        #chapter-nav ul li:hover .over {
            display: block;
            border-radius: 2px;
        }

        #chapter-nav ul li.disabled .over {
            display: none!important;
        }

        #chapter-nav ul li .over div.description {
            background-color: #eeeeee;
            padding: 3px;
            text-align: center;
            width: 170px;
            margin-left: -43px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            margin-bottom: 2px;
        }

        #chapter-nav ul li .over p.title {
            width: 170px;
            display: block;
            color: #333333;
            font-weight: bold;
            font-size: 11px;
            margin-bottom: 2px;
            text-transform: uppercase;
            text-shadow: 0px 0px 4px #eeeeee;
            -o-text-shadow: 0px 0px 4px #eeeeee;
            -moz-text-shadow: 0px 0px 4px #eeeeee;
            -webkit-text-shadow: 0px 0px 4px #eeeeee;
        }

            #chapter-nav ul li .over p.title span {
                padding: 3px;
                border-radius: 2px;
            }

        #chapter-nav ul li .over p.pagenumber {
            font-size: 10px;
            color: #858585;
            text-align: center;
            margin-bottom: 4px;
        }

        #chapter-nav ul li .over div.small-book {
            background-position: -190px -227px;
            display: block;
            width: 87px;
            height: 30px;
        }

        #chapter-nav ul li.selected .over div.small-book {
            outline: 2px solid #e2494f;
        }

        #chapter-nav ul li .over div.small-book p {
            width: 40px;
            font-size: 11px;
            color: #333333;
            text-align: center;
            position: relative;
            top: 9px;
            float: right;
        }

        #chapter-nav ul li .over div.small-book .illustration {
            width: 28px;
            height: 28px;
            float: left;
            margin: 1px 0 0 8px;
        }

/**
 * Pagination
 */
#pagination-prev {
    position: absolute;
    z-index: 1500;
    top: 50%;
    left: 0px;
    opacity: 1;
    transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    -moz-transition: opacity .4s linear;
    -webkit-transition: opacity .4s linear;
}

.home #pagination-prev {
    opacity: 0;
}

#pagination-prev div.arrow {
    background-position: -366px -189px;
    width: 42px;
    height: 70px;
    text-indent: -10000em;
}

#pagination-prev:hover div.arrow {
    background-position: -366px -290px;
}

#pagination-prev:active div.arrow {
    background-position: -366px -390px;
}

#pagination-prev.inactive div.arrow {
    background-position: -366px -490px;
    cursor: default;
}

#pagination-next {
    position: absolute;
    z-index: 1500;
    top: 50%;
    right: 0;
    opacity: 1;
    transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    -moz-transition: opacity .4s linear;
    -webkit-transition: opacity .4s linear;
}

.credits #pagination-next {
    opacity: 0;
}

#pagination-next div.arrow {
    background-position: -471px -189px;
    width: 42px;
    height: 70px;
    text-indent: -10000em;
}

#pagination-next:hover div.arrow {
    background-position: -471px -290px;
}

#pagination-next:active div.arrow {
    background-position: -471px -390px;
}

#pagination-next.inactive div.arrow {
    background-position: -471px -490px;
    cursor: default;
}

div.page-progress {
    background-color: #eeeeee;
    position: absolute;
    right: 50px;
    top: 16px;
    padding: 6px;
    width: auto;
    visibility: hidden;
    opacity: 0;
}

    div.page-progress p.thing {
        display: block;
        font-size: 10px;
        font-weight: bold;
        white-space: nowrap;
    }

    div.page-progress p.number {
        display: block;
        font-size: 9px;
        white-space: nowrap;
    }

.cs-CZ div.page-progress p.number,
.pl-PL div.page-progress p.number {
    font-size: 12px;
}

#pagination-next div.page-progress {
    right: 50px;
    top: 17px;
    text-align: right;
}

#pagination-next div.page-progress,
#pagination-next:hover div.page-progress {
    transition: opacity .21s linear;
    -o-transition: opacity .21s linear;
    -moz-transition: opacity .21s linear;
    -webkit-transition: opacity .21s linear;
}

#pagination-next:hover div.page-progress {
    visibility: visible;
    opacity: 1;
}

#pagination-prev div.page-progress {
    left: 50px;
    right: auto;
    top: 18px;
    text-align: left;
}

#pagination-prev div.page-progress,
#pagination-prev:hover div.page-progress {
    transition: opacity .21s linear;
    -o-transition: opacity .21s linear;
    -moz-transition: opacity .21s linear;
    -webkit-transition: opacity .21s linear;
}

#pagination-prev:hover div.page-progress {
    visibility: visible;
    opacity: 1;
}


/**
 * Table of Contents
 */
#table-of-contents {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    z-index: 1999;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: background-color .4s linear;
    -o-transition: background-color .4s linear;
    -moz-transition: background-color .4s linear;
    -webkit-transition: background-color .4s linear;
}

body.tot #table-of-contents {
    opacity: 1;
    display: block;
}

#table-of-contents div.center {
    position: relative;
    width: 836px;
    height: 550px;
    left: 50%;
    top: 50%;
    margin: -295px 0 0 -483px;
}

#table-of-contents a.go-back {
    background-position: -236px -306px;
    height: 24px;
    padding: 5px 10px 0 28px;
    display: block;
    font-size: 12px;
    float: left;
    left: 4px;
    top: 3px;
    position: absolute;
    background-color: #eeeeee;
    transition: background-color .4s linear;
    -o-transition: background-color .4s linear;
    -moz-transition: background-color .4s linear;
    -webkit-transition: background-color .4s linear;
    z-index: 1;
}

    #table-of-contents a.go-back:hover {
        background-position: -236px -336px;
        color: #000000;
    }

    #table-of-contents a.go-back:active {
        background-position: -236px -366px;
    }

#table-of-contents hr {
    width: 948px;
    border-color: #ffffff;
    color: #eeeeee;
    position: absolute;
    top: 6px;
    left: 6px;
}

#table-of-contents h2 {
    font-size: 26px;
    width: 100%;
    text-align: center;
    text-shadow: 0 1px 1px #ffffff;
    -o-text-shadow: 0 1px 1px #ffffff;
    -moz-text-shadow: 0 1px 1px #ffffff;
    -webkit-text-shadow: 0 1px 1px #ffffff;
}

    #table-of-contents h2 span {
        padding: 0 8px;
        background-color: #eeeeee;
        position: relative;
        z-index: 1;
        text-transform: uppercase;
        transition: background-color .4s linear;
        -o-transition: background-color .4s linear;
        -moz-transition: background-color .4s linear;
        -webkit-transition: background-color .4s linear;
    }

#table-of-contents ul {
    margin-top: 10px;
}

    #table-of-contents ul li {
        display: block;
        width: 188px;
        height: 130px;
        float: left;
        margin: 0 2px 4px 2px;
        text-align: center;
        position: relative;
    }

        #table-of-contents ul li a {
            padding: 0 2px;
            display: block;
            width: 184px;
            min-height: 130px;
            background-color: #eeeeee;
            transition: background-color .4s linear;
            -o-transition: background-color .4s linear;
            -moz-transition: background-color .4s linear;
            -webkit-transition: background-color .4s linear;
        }

            #table-of-contents ul li a:hover {
                background-color: #f7f7f7;
                border-radius: 4px;
                transition: background-color .11s linear;
                -o-transition: background-color .11s linear;
                -moz-transition: background-color .11s linear;
                -webkit-transition: background-color .11s linear;
                box-shadow: 0px 2px 4px #cdcdcd;
                -o-box-shadow: 0px 2px 4px #cdcdcd;
                -moz-box-shadow: 0px 2px 4px #cdcdcd;
                -webkit-box-shadow: 0px 2px 4px #cdcdcd;
            }

        #table-of-contents ul li.disabled a {
            cursor: default;
        }

        #table-of-contents ul li div.medium-book {
            background-position: -12px -304px;
            width: 187px;
            height: 66px;
        }

        #table-of-contents ul li.read div.medium-book {
            background-position: -12px -378px;
        }

        #table-of-contents ul li.disabled div.medium-book {
            background-position: -12px -460px;
        }

        #table-of-contents ul li div.medium-book p {
            text-align: left;
            position: relative;
            top: 26px;
            left: 15px;
        }

        #table-of-contents ul li div.medium-book .illustration {
            width: 60px;
            height: 60px;
            float: right;
            margin: 3px 24px 0 0;
        }

        #table-of-contents ul li.disabled .illustration {
            display: none;
        }

        #table-of-contents ul li h3 {
            font-size: 13px;
            font-weight: bold;
            width: 90%;
            margin: 5px 0 4px 5%;
            transition: color .18s linear;
            -o-transition: color .18s linear;
            -moz-transition: color .18s linear;
            -webkit-transition: color .18s linear;
        }

.cs-CZ #table-of-contents ul li h3,
.pl-PL #table-of-contents ul li h3 {
    font-size: 12px;
}

#table-of-contents ul li:hover h3,
#table-of-contents ul li.selected h3 {
    color: #b41e21;
}

#table-of-contents ul li.disabled h3 {
    color: #777777;
}

#table-of-contents ul li p {
    font-size: 11px;
    width: 90%;
    margin-left: 5%;
    color: #999999;
    padding-bottom: 5px;
}

.cs-CZ #table-of-contents ul li p,
.pl-PL #table-of-contents ul li p {
    font-size: 12px;
}



/**
 * 
 */
#credits {
    position: absolute;
    width: 640px;
    height: 510px;
    left: 50%;
    top: 50%;
    margin: -255px 0 0 -320px;
    text-align: center;
    display: none;
    z-index: 1;
}

body.credits #credits {
    display: block;
}

#credits hr {
    width: 640px;
    border-color: #ffffff;
    color: #eeeeee;
}

#credits div.header h2 {
    font-size: 26px;
    font-weight: bold;
    text-shadow: 0 1px 1px #ffffff;
    -o-text-shadow: 0 1px 1px #ffffff;
    -moz-text-shadow: 0 1px 1px #ffffff;
    -webkit-text-shadow: 0 1px 1px #ffffff;
}

    #credits div.header h2 span {
        padding: 0 8px;
        background-color: #eeeeee;
        position: relative;
        z-index: 1;
        transition: background-color .4s linear;
        -o-transition: background-color .4s linear;
        -moz-transition: background-color .4s linear;
        -webkit-transition: background-color .4s linear;
    }

#credits div.header hr {
    position: absolute;
    top: 6px;
}

#credits div.people {
    margin: 30px 0 15px 0;
}

    #credits div.people ul li {
        display: inline-block;
        width: 184px;
        height: 65px;
        color: #666666;
        margin: 0 13px 24px 13px;
        font-size: 12px;
        line-height: 16px;
        vertical-align: top;
    }

        #credits div.people ul li h3 {
            background-position: -10px -549px;
            width: 184px;
            height: 26px;
            display: block;
            color: #ffffff;
            font-weight: bold;
            padding-top: 0px;
            font-size: 10px;
        }

    #credits div.people h4 {
        font-size: 14px;
        font-weight: bold;
        clear: both;
        margin-top: 6px;
    }

    #credits div.people p {
        margin-top: 12px;
        font-size: 12px;
        color: #666666;
        line-height: 1.8em;
        width: 627px;
    }

#credits div.share {
    margin-top: 20px;
    text-align: left;
}

    #credits div.share p {
        color: #999999;
        font-size: 11px;
        width: 240px;
        float: left;
        line-height: 15px;
    }

.cs-CZ #credits div.share p,
.pl-PL #credits div.share p {
    font-size: 10px;
}

#credits div.share ul {
    /*width: 390px;*/
    float: right;
    margin-top: -4px;
}

    #credits div.share ul li {
        font-size: 10px;
        font-weight: bold;
        /*width: 100px;*/
        float: left;
        margin-left: 8px;
        padding: 4px;
        outline: 1px solid #eee;
        cursor: pointer;
        border-radius: 4px;
        background-color: #eeeeee;
        transition: background-color,outline .1s,.1s linear;
        -o-transition: background-color,outline .1s,.1s linear;
        -moz-transition: background-color,outline .1s,.1s linear;
        -webkit-transition: background-color,outline .1s,.1s linear;
    }

        #credits div.share ul li.facebook {
            margin-left: 0;
        }

        #credits div.share ul li:hover {
            background-color: #f7f7f7;
            outline: 1px solid #ddd;
        }

        #credits div.share ul li span.text {
            display: block;
            float: left;
            margin-top: 4px;
        }

        #credits div.share ul li a:hover {
            color: #000000;
        }

        #credits div.share ul li span.icon {
            display: block;
            width: 38px;
            height: 32px;
            float: left;
            margin-right: 4px;
        }

        #credits div.share ul li.facebook span.icon {
            background-position: -25px -609px;
        }

        #credits div.share ul li.twitter span.icon {
            background-position: -79px -609px;
        }

        #credits div.share ul li.buzz span.icon {
            background-position: -132px -607px;
        }

#credits div.people p.html5-logo {
    margin: 4px 0 24px 0;
}

    #credits div.people p.html5-logo img {
        position: relative;
        top: 11px;
    }

/**
 * 
 */
#overlay {
    background: url('images/overlay-pattern.png') repeat top left;
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2200;
}

    #overlay div.bookmark {
        background-position: -585px -160px;
        width: 190px;
        height: 600px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -300px 0 0 -95px;
    }

        #overlay div.bookmark .content {
            margin: 20px;
            text-align: center;
            color: #ffffff;
        }

            #overlay div.bookmark .content a.close {
                display: inline-block;
                background: #fff;
                font-size: 11px;
                font-weight: bold;
                color: #b41e21;
                padding: 6px 8px 5px 8px;
                margin: 22px 0 0 5px;
                border-radius: 6px;
                opacity: .7;
                transition: opacity .1s linear;
                -o-transition: opacity .1s linear;
                -moz-transition: opacity .1s linear;
                -webkit-transition: opacity .1s linear;
            }

                #overlay div.bookmark .content a.close:hover {
                    opacity: 1;
                }

            #overlay div.bookmark .content h3 {
                font-size: 22px;
                font-weight: bold;
                line-height: 1.3em;
                margin-top: 70px;
                letter-spacing: -1px;
                padding: 0 8px;
            }

            #overlay div.bookmark .content p {
                font-size: 13px;
                line-height: 1.3em;
                margin-top: 18px;
                color: #daa8a9;
                padding: 0 16px;
            }

            #overlay div.bookmark .content a.action {
                color: #ffffff;
                background-color: #a52c23;
                font-size: 16px;
                display: block;
                font-weight: bold;
                position: relative;
                left: 20px;
                width: 90px;
                transition: background-color .1s linear;
                -o-transition: background-color .1s linear;
                -moz-transition: background-color .1s linear;
                -webkit-transition: background-color .1s linear;
                border: 1px #9c2325 solid;
                border-radius: 6px;
                padding: 9px 9px;
            }

                #overlay div.bookmark .content a.action:hover {
                    background-color: #b83436;
                    border: 1px #9c2325 solid;
                    border-radius: 6px;
                    padding: 9px 9px;
                }

                #overlay div.bookmark .content a.action:active {
                    background-color: #ab383a;
                    border: 1px #9c2325 solid;
                    border-radius: 6px;
                    padding: 9px 9px;
                }

                #overlay div.bookmark .content a.action.resume {
                    margin-top: 24px;
                }

                #overlay div.bookmark .content a.action.restart {
                    margin-top: 16px;
                }


    #overlay div.print {
        background-position: -565px -794px;
        width: 705px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -74px 0 0 -352px;
    }

        /*#overlay div.print a.close {
			/*color: #fff;
			margin: 3px 0 0 -91px;
			width: 45px;
			height: 16px;
			padding: 7px 0 0 12px;
			position: absolute;
			z-index: 5000;
			opacity: 1;
			background: #333;
		}*/

        /*#overlay div.print a.closeprint:hover {
				background: #666666;
				background: #fff;
			}*/

        #overlay div.print a.printBook,
        #overlay div.print a.downloadPdf {
            display: block;
            width: 352px;
            height: 166px;
            float: left;
            margin-top: 7px;
        }

            #overlay div.print a.printBook:hover {
                background-position: -566px -996px;
            }

            #overlay div.print a.downloadPdf:hover {
                background-position: -917px -996px;
            }

            #overlay div.print a.downloadPdf.disabled,
            #overlay div.print a.downloadPdf.disabled:hover {
                background-position: -917px -1176px;
                cursor: default;
            }

        #overlay div.print h2 {
            text-transform: uppercase;
            font-size: 30px;
            margin: 38px 0 0 109px;
            letter-spacing: -1px;
        }

        #overlay div.print a.downloadPdf h2 {
            margin-left: 43px;
        }

        #overlay div.print a.disabled h2 {
            color: #999;
        }

        #overlay div.print p {
            font-size: 11px;
            width: 124px;
            color: #666;
            margin: 15px 0 0 78px;
            padding: 20px 20px 15px 110px;
            background-position: -1156px -1487px;
        }

        #overlay div.print a.downloadPdf p {
            margin-left: 35px;
            padding-right: 0;
            padding-left: 100px;
            width: 144px;
            background-position: -1174px -1424px;
        }

        #overlay div.print a.downloadPdf.disabled p {
            background-position: -1174px -1364px;
        }

        #overlay div.print a:hover h2,
        #overlay div.print a:hover p {
            color: #fff;
        }

        #overlay div.print a.disabled:hover h2 {
            color: #999;
        }

        #overlay div.print a.disabled:hover p {
            color: #666;
        }

/**
 * Footer styles
 */
footer {
    background-position: 0 -117px;
    background-repeat: repeat-x;
    display: block;
    width: 100%;
    height: 25px;
    min-width: 836px;
    position: absolute;
    top: 100%;
    margin-top: -25px;
    font-size: 11px;
    color: #666666;
    z-index: 2000;
}

    footer span.curator {
        margin: 8px 0 0 13px;
        float: left;
    }

.cs-CZ footer span.curator,
.pl-PL footer span.curator {
    font-size: 10px;
}


footer div.print a,
footer div.print a:hover,
footer div.lights a,
footer div.lights a:hover,
footer div.fullscreen a,
footer div.fullscreen a:hover,
footer div.sharing,
footer div.sharing:hover {
    transition: background-color,color 0.1s,0.1s linear;
    -o-transition: background-color,color 0.1s,0.1s linear;
    -moz-transition: background-color,color 0.1s,0.1s linear;
    -webkit-transition: background-color,color 0.1s,0.1s linear;
}

footer div.right-side {
    float: right;
    margin-right: 0;
}

    footer div.right-side div {
        display: block;
        float: left;
    }

        footer div.right-side div.divider {
            position: relative;
            top: 1px;
            width: 1px;
            height: 24px;
            background-color: #d2d2d2;
            display: inline-block;
            border: solid white 1px;
            border-bottom: none;
            border-top: none;
        }

footer div.invite {
    padding: 7px 18px 0;
    margin-top: 1px;
}

    footer div.invite:hover {
        color: #b41e21;
        background-color: rgba(255,255,255,0.7);
    }

    footer div.invite ul li {
        margin: -3px 0px 0 5px;
        float: left;
    }

        footer div.invite ul li a {
            width: 72px;
            height: 21px;
            display: block;
        }

footer div.sharing {
    padding: 6px 34px 1px 1px;
    margin-top: 1px;
}

    footer div.sharing:hover {
        color: #b41e21;
        background-color: rgba(255,255,255,0.7);
    }

    footer div.sharing input.clipboard-notification {
        display: none;
        width: 160px;
        height: 14px;
        padding: 7px 5px;
        text-align: center;
        border-radius: 3px;
        border: 1px solid #999;
        background-color: #faffca;
        position: absolute;
        top: -40px;
        margin-left: -10px;
        font-size: 12px;
        color: #333;
    }

    footer div.sharing p {
        float: left;
    }

.cs-CZ footer p,
.cs-CZ footer div,
.pl-PL footer p,
.pl-PL footer div {
    font-size: 10px;
}


footer div.sharing ul {
    margin-left: 2px;
    width: 85px;
    float: left;
}

    footer div.sharing ul li {
        margin: -3px 0px 0 5px;
        float: left;
    }

        footer div.sharing ul li a {
            width: 16px;
            height: 21px;
            display: block;
        }

        footer div.sharing ul li.facebook a {
            background-position: -7px -150px;
        }

            footer div.sharing ul li.facebook a:hover {
                background-position: -7px -174px;
            }

            footer div.sharing ul li.facebook a:active {
                background-position: -7px -198px;
            }

        footer div.sharing ul li.twitter a {
            background-position: -26px -150px;
        }

            footer div.sharing ul li.twitter a:hover {
                background-position: -26px -174px;
            }

            footer div.sharing ul li.twitter a:active {
                background-position: -26px -198px;
            }

        footer div.sharing ul li.buzz a {
            background-position: -43px -150px;
        }

            footer div.sharing ul li.buzz a:hover {
                background-position: -43px -174px;
            }

            footer div.sharing ul li.buzz a:active {
                background-position: -43px -198px;
            }

        footer div.sharing ul li.url a {
            background-position: -63px -150px;
        }

            footer div.sharing ul li.url a:hover {
                background-position: -63px -174px;
            }

            footer div.sharing ul li.url a:active {
                background-position: -63px -198px;
            }

footer div.print {
    margin: 0;
}

    footer div.print a {
        float: left;
        margin: 0;
        padding: 7px 14px 0;
        margin-top: 1px;
        height: 17px;
        color: #666666;
        text-decoration: none;
    }

        footer div.print a:hover {
            color: #b41e21;
            background-color: rgba(255,255,255,0.7);
        }

        footer div.print a span.icon {
            background-position: -102px -161px;
            width: 20px;
            height: 17px;
            display: block;
            margin-top: -3px;
            float: left;
        }

footer div.lights-wrapper {
    width: 117px;
    height: 17px;
}

footer div.lights,
.dark .lights.clone {
    margin: 0;
}

    footer div.lights a,
    .dark .lights.clone a {
        float: left;
        width: 117px;
        height: 17px;
        margin: 0;
        padding: 7px 0 0;
        margin-top: 1px;
        color: #666666;
        position: relative;
        text-decoration: none;
        text-indent: -10000em;
        background-position: -354px -727px;
        transition: color .4s linear;
        -o-transition: color .4s linear;
        -moz-transition: color .4s linear;
        -webkit-transition: color .4s linear;
    }

    .dark .lights.clone a {
        background-position: -354px -759px;
    }

div.lights.clone {
    background: none;
}

.lights a:hover {
    background-color: rgba(255,255,255,0.7);
}

.lights a span.icon,
.dark .lights a span.icon {
    background-position: -386px -794px;
    width: 25px;
    height: 14px;
    display: block;
    position: absolute;
    top: 6px;
    transition: left .2s linear;
    -o-transition: left .2s linear;
    -moz-transition: left .2s linear;
    -webkit-transition: left .2s linear;
}

.lights a span.icon {
    left: 32px;
}

    .lights a span.icon.off {
        left: 57px;
        transition: left .1s linear;
        -o-transition: left .1s linear;
        -moz-transition: left .1s linear;
        -webkit-transition: left .1s linear;
    }

footer div.fullscreen-wrapper {
    width: 117px;
    height: 17px;
}

footer div.fullscreen,
.fullscreen div.fullscreen.clone {
    margin: 0;
}

    footer div.fullscreen a,
    div.fullscreen.clone a {
        float: left;
        margin: 0;
        padding: 7px 0 0;
        margin-top: 1px;
        height: 17px;
        width: 117px;
        color: #666666;
        position: relative;
        text-decoration: none;
        text-indent: -10000em;
        background-position: -354px -817px;
        transition: color .4s linear;
        -o-transition: color .4s linear;
        -moz-transition: color .4s linear;
        -webkit-transition: color .4s linear;
        transition: background-color .13s linear;
        -o-transition: background-color .13s linear;
        -moz-transition: background-color .13s linear;
        -webkit-transition: background-color .13s linear;
    }

div.fullscreen a:hover {
    background-color: rgba(255,255,255,0.7);
}

div.fullscreen.clone a:hover {
    background-color: rgba(255,255,255,0);
}

div.fullscreen.clone {
    background: none;
}

div.fullscreen a span.icon,
.fullscreen div.fullscreen a span.icon {
    background-position: -386px -884px;
    width: 25px;
    height: 14px;
    display: block;
    position: absolute;
    top: 6px;
    transition: left .2s linear;
    -o-transition: left .2s linear;
    -moz-transition: left .2s linear;
    -webkit-transition: left .2s linear;
}

div.fullscreen a span.icon {
    left: 32px;
}

    div.fullscreen a span.icon.off {
        left: 57px;
        transition: left .1s linear;
        -o-transition: left .1s linear;
        -moz-transition: left .1s linear;
        -webkit-transition: left .1s linear;
    }


footer ul li {
    list-style: none;
    display: inline;
    margin: 5px;
}


/**
 * 
 */
#sharer,
#sharer:hover,
#sharer div.content ul,
#sharer:hover div.content ul,
#sharer div.background-bottom,
#sharer:hover div.background-bottom,
#sharer div.content,
#sharer:hover div.content {
    transition: all .2s cubic-bezier(0.1, 0.3, 0.58, 1.0);
    -o-transition: all .2s cubic-bezier(0.1, 0.3, 0.58, 1.0);
    -moz-transition: all .2s cubic-bezier(0.1, 0.3, 0.58, 1.0);
    -webkit-transition: all .2s cubic-bezier(0.1, 0.3, 0.58, 1.0);
}

    #sharer div.content ul li,
    #sharer div.content ul li:hover {
        transition: all .11s cubic-bezier(0.1, 0.3, 0.58, 1.0);
        -o-transition: all .11s cubic-bezier(0.1, 0.3, 0.58, 1.0);
        -moz-transition: all .11s cubic-bezier(0.1, 0.3, 0.58, 1.0);
        -webkit-transition: all .11s cubic-bezier(0.1, 0.3, 0.58, 1.0);
    }

#sharer {
    width: 80px;
    height: 140px;
    position: absolute;
    left: 560px;
    top: 6px;
    z-index: 10;
    display: none;
    overflow: hidden;
}

    #sharer:hover {
        height: 280px;
    }

    #sharer div.background-top {
        background-position: -213px -509px;
        width: 80px;
        height: 7px;
    }

    #sharer div.background-bottom {
        background-position: -213px -682px;
        width: 80px;
        height: 129px;
        position: absolute;
    }

    #sharer:hover div.background-bottom {
        background-position: -213px -516px;
        width: 80px;
        height: 275px;
    }

    #sharer div.content {
        height: 280px;
        width: 47px;
        position: absolute;
        margin-left: 16px;
        bottom: 0;
    }

        #sharer div.content ul {
            margin-left: 0px;
            margin-top: 10px;
            opacity: 0;
        }

    #sharer:hover div.content ul {
        opacity: 1;
        margin-bottom: 44px;
    }

    #sharer div.content ul li {
        margin-bottom: 1px;
    }

        #sharer div.content ul li:hover {
            background-color: #cd4446;
        }

        #sharer div.content ul li a {
            width: 47px;
            height: 39px;
            display: block;
        }

        #sharer div.content ul li.facebook a {
            background-position: -289px -519px;
        }

        #sharer div.content ul li.twitter a {
            background-position: -289px -559px;
        }

        #sharer div.content ul li.buzz a {
            background-position: -289px -599px;
        }

        #sharer div.content ul li.print {
            background-position: -289px -639px;
        }

            #sharer div.content ul li.print a {
                background-position: -86px -149px;
                text-indent: -10000em;
                /*background: none;
						color: white;
						font-size: 11px;
						text-align: center;
						display: table-cell;
						vertical-align: middle;*/
            }

    #sharer div.content p.index {
        margin-top: 20px;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
        color: #ffffff;
        text-shadow: 0px -1px 1px #744041;
        -o-text-shadow: 0px -1px 1px #744041;
        -moz-text-shadow: 0px -1px 1px #744041;
        -webkit-text-shadow: 0px -1px 1px #744041;
    }

        #sharer div.content p.index span {
            font-size: 26px;
            display: block;
            width: 46px;
            text-align: center;
            /*position: absolute;*/
        }

    #sharer div.content p.instruction {
        margin: 60px 0 0 -16px;
        text-align: center;
        font-weight: bold;
        font-size: 9px;
        color: #666666;
        width: 80px;
    }

.cs-CZ #sharer div.content p.instruction,
.pl-PL #sharer div.content p.instruction {
    font-size: 10px;
}


#sharer div.content p.instruction span {
    background-position: -309px -697px;
    width: 6px;
    height: 6px;
    display: block;
    margin: 5px 0 0 37px;
}


/**
 * Page styles
 */
#pages {
    width: 1272px;
    height: 520px;
    position: absolute;
    left: 32px;
    top: 10px;
}
    #pages .right img {
        height:150px;
    }

    #pages section {
        width: 640px;
        height: 500px;
        position: absolute;
        top: 0;
        margin-left: 631px;
        overflow: hidden;
        background: url( 'images/right-page-paper.jpg' ) no-repeat;
        background-color: #fff;
    }

        #pages section div.page {
            width: 585px;
            height: 440px;
            position: absolute;
            padding: 25px 45px 35px 40px;
        }

            #pages section div.page .page-title {
                text-align: center;
            }

            #page section div.page .showmap {
                background: transparent url('Content\themes\custom\Image\Maps.png') no-repeat top left;
            }

            #pages section div.page .right {
                padding: 5px;
                position: absolute;
            }

            #pages section div.page .box {
                width: 582px;
                padding: 5px;
                top: 267px;
                overflow: hidden;
                height: 151px;
                position: absolute;
            }

            #pages section div.page .seemore {
                margin-top: 14px;
                top: 419px;
                margin-left: 70%;
                position: absolute;
            }

            #pages section div.page .box:after {
                position: absolute;
                background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.73) 22%, rgba(255,255,255,0.73) 23%, rgba(255,255,255,1) 91%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(22%,rgba(255,255,255,0.73)), color-stop(23%,rgba(255,255,255,0.73)), color-stop(91%,rgba(255,255,255,1)));
                background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
                background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
                background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
                background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
                bottom: -16px;
                content: "";
                height: 53px;
                left: 4px;
                right: 0;
            }

            #pages section div.page .comment {
                height: 32px;
                margin-left: 40%;
                position: absolute;
                top: 468px;
            }

                #pages section div.page .comment .zingme,
                #pages section div.page .comment .facebook,
                #pages section div.page .comment .twitter {
                    margin-bottom: 10px;
                    background: transparent url('images/socialicons.png') no-repeat top left;
                }

                #pages section div.page .comment a {
                    display: inline-block;
                    height: 25px;
                    width: 28px;
                }

                #pages section div.page .comment p {
                    margin-left: -78px;
                    position: absolute;
                }

                #pages section div.page .comment .zingme {
                    background-position: 0px 0px;
                }

                #pages section div.page .comment .facebook {
                    background-position: -26px 0px;
                }

                #pages section div.page .comment .twitter {
                    background-position: -108px 0px;
                }


            #pages section div.page span.pageNumber {
                bottom: 5px;
                color: #999999;
                float: right;
                font-family: DroidSerif,Times,serif;
                font-size: 12px;
                position: absolute;
                right: 60px;
            }

        #pages section p.drop-cap:first-letter {
            float: left;
            font-size: 45px;
            margin: 7px 5px 0 0;
            vertical-align: text-top;
        }

        #pages section.title-theend {
            background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        }

            #pages section.title-theend .pageNumber {
                display: none;
            }

/**
 * Table of Contents view
 */
body.tot #pagination-prev,
body.tot #pagination-next {
    display: none!important;
}

#articleId, #pageNumber, #currentPage {
    display: none;
}


/**
 * Lights out mode
 */
html.dark,
body.dark,
.dark #table-of-contents,
.dark #table-of-contents ul li,
.dark #table-of-contents a.go-back,
.dark #pagination-next div.page-progress,
.dark #chapter-nav ul li a.over div.description,
.dark #credits div.header h2 span,
.dark #table-of-contents h2 span {
    background-color: #272727;
    transition: background-color .4s linear;
    -o-transition: background-color .4s linear;
    -moz-transition: background-color .4s linear;
    -webkit-transition: background-color .4s linear;
}

.dark header,
.dark footer {
    opacity: .25;
    transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    -moz-transition: opacity .4s linear;
    -webkit-transition: opacity .4s linear;
}

.dark #chapter-nav,
.dark #pagination-next {
    opacity: .25;
    transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    -moz-transition: opacity .4s linear;
    -webkit-transition: opacity .4s linear;
}

    #grey-mask,
    #chapter-nav,
    header,
    footer,
    #pagination-next,
    .dark #chapter-nav:hover,
    .dark footer:hover,
    .dark header:hover,
    .dark header.searching,
    .dark #search-dropdown.searching,
    .dark #pagination-next:hover,
    .dark .lights.clone:hover {
        opacity: 1;
        transition: opacity .4s linear;
        -o-transition: opacity .4s linear;
        -moz-transition: opacity .4s linear;
        -webkit-transition: opacity .4s linear;
    }

    .dark #pagination-next div.page-progress p,
    .dark #chapter-nav > p,
    .dark #chapter-nav ul li a.over div.description p,
    .dark #credits div.header h2 span,
    .dark #table-of-contents h2 span,
    .dark #credits div.people h4,
    .dark #credits div.share ul li a,
    .dark #credits div.share ul li a:hover,
    .dark #table-of-contents a.go-back {
        color: #a5a5a5;
        text-shadow: none;
    }

.dark #credits div.people a {
    color: #999;
}

.dark #credits hr,
.dark #table-of-contents hr {
    border-color: #a5a5a5;
}

.dark #table-of-contents ul li h3 {
    color: #fff;
}

.dark #table-of-contents ul li a:hover h3 {
    color: #b41e21;
}

.dark #table-of-contents ul li.disabled {
    opacity: .5 !important;
}

    .dark #table-of-contents ul li.disabled h3,
    .dark #table-of-contents ul li.disabled p,
    .dark #table-of-contents ul li.disabled a:hover h3 {
        color: #585858;
    }

.dark #grey-mask {
    opacity: 0;
    transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    -moz-transition: opacity .4s linear;
    -webkit-transition: opacity .4s linear;
}

.dark #credits div.share ul li {
    background: none;
    outline: none;
}

    .dark #credits div.share ul li:hover {
        background-color: #333;
    }

.lights.clone {
    position: absolute;
    bottom: 0;
    right: 120px;
    font-size: 11px;
    background-position: 0 -117px;
    background-repeat: repeat-x;
    height: 25px;
    z-index: 2100;
    margin: 0;
    padding: 0;
    opacity: .7;
    transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
    background: none;
}

.dark .lights.clone.active {
    opacity: 1;
}

    .dark .lights.clone.active a {
        background-position: -354px -727px;
    }

.fullscreen.clone {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 11px;
    height: 25px;
    z-index: 2100;
    margin: 0;
    padding: 0;
    transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
    background: none;
    opacity: .7;
}

.fullscreen .fullscreen.clone:hover {
    opacity: 1;
}


.fullscreen #pageflip,
.fullscreen #back-cover,
.fullscreen #left-page,
.fullscreen #right-page,
.fullscreen #shadow,
.fullscreen #spine,
.fullscreen #sharer,
.fullscreen #chapter-nav,
.fullscreen #page-shadow-overlay,
.fullscreen footer,
.fullscreen header {
    display: none!important;
}

.fullscreen .title-theend {
    display: block!important;
    background: #f9f9f9!important;
}

    .fullscreen .title-theend p:after {
        content: "Thanks joining us! If you found this helpful, don't forget to share this web book with friends and family.";
    }

.fullscreen canvas {
    opacity: 0;
}

.fullscreen #pages section {
    background: #f9f9f9;
    border-radius: 2px;
}

.fullscreen #front-cover-bookmark {
    margin-left: -100px;
}

.fullscreen #front-cover,
.fullscreen #back-cover,
.fullscreen #pages section,
.fullscreen #front-cover-bookmark {
    transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
}

#front-cover,
#back-cover,
#pages section,
#front-cover-bookmark {
    transition: transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -webkit-transition: -webkit-transform .2s ease-out;
}

#front-cover-bookmark {
    transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
}


/**
 * Book shadow
 */
#book-shadow {
    position: absolute;
    bottom: 5px;
    right: 14px;
    width: 1613px;
    height: 498px;
    opacity: 1;
    box-shadow: 0px 0px 45px #5f5f5f;
    -o-box-shadow: 0px 0px 45px #5f5f5f;
    -moz-box-shadow: 0px 0px 45px #5f5f5f;
    -webkit-box-shadow: 0px 0px 45px #5f5f5f;
}

.home #book-shadow {
    width: 803px;
    right: 14px;
}

.credits #book-shadow {
    right: 850px;
}

.dark #book-shadow {
    display: none;
}


#shadow {
    height: 555px;
    width: 1280px;
    position: absolute;
    right: 20px;
    top: -13px;
    background: url(./images/repeat-x.png) repeat-x;
}

.home #shadow {
    width: 624px;
}

.credits #shadow {
    width: 639px;
    right: auto;
    left: 20px;
}

#shadow .shadow-left {
    height: 555px;
    width: 37px;
    position: absolute;
    left: -37px;
    background-position: -16px -874px;
}

#shadow .shadow-right {
    height: 555px;
    width: 37px;
    position: absolute;
    right: -37px;
    background-position: -72px -874px;
}

/**
 * Book spine
 */

#spine {
    height: 522px;
    width: 55px;
    position: absolute;
    left: 636px;
    top: -1px;
    opacity: 1;
    transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    -moz-transition: opacity .4s linear;
    -webkit-transition: opacity .4s linear;
}

.home #spine, .credits #spine {
    opacity: 0;
    transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    -moz-transition: opacity .4s linear;
    -webkit-transition: opacity .4s linear;
}

#spine div {
    width: 55px;
    height: 1px;
    background-position: -28px -773px;
    position: absolute;
    top: 0;
}

#spine .spine-bottom {
    top: auto;
    bottom: 0;
}



/**
 * Touch settings
 */
.touch-device #chapter-nav ul li:hover,
.touch-device #chapter-nav ul li:hover {
    opacity: 1;
}

.touch-device #chapter-nav ul li a.over {
    display: none!important;
}
